//运营管理 - 消息管理

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Table, Tag } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    key: i,
    publishTime: '2018-12-07 14:16:24',
    publisher: '超级管理员',
    title: '欢迎使用白鲨钱包',
    content: '月光一族不用慌，白鲨钱包来帮忙！关注白鲨钱包公众号，有任何问题都可以向客服美眉求助哦',
    status: '已发送',
    cz: ''
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Message extends Component {

  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">消息列表</span>
              <div className="btn">
                <Button icon="plus" size="small">新增</Button>
                <Button icon="redo" size="small">刷新</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='发布时间' align='center' dataIndex='publishTime' width='70' />
              <Column title='发布者' align='center' dataIndex='publisher' width='70' />
              <Column title='标题' align='center' dataIndex='title' width='70' />
              <Column title='内容' align='center' dataIndex='content' width='100' />
              <Column title='状态' align='center' dataIndex='status' width='70' />
              <Column title='操作' align='center' dataIndex='cz' width='70' 
                render={cz => (
                  <span>
                    <Tag color="red" key={cz}><Icon type='close' /></Tag>
                  </span>
                )} />
            </Table>
          </div>
        </div> 
      </LocaleProvider> 
		);
	}
}

export default Message;